<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Responsive Nav bar</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="mobile-web-app-capable" content="yes">
	<link rel="stylesheet" href="../css/semantic.min.css">
	<!-- <link rel="stylesheet" href="../css/semantic.flatly.min.css"> -->
	<!-- <link rel="stylesheet" href="../css/semantic.journal.min.css"> -->
	<link rel="stylesheet" href="../css/icon.css">
	<link rel="stylesheet" href="../css/global.css">
	<script type="text/javascript" src="../js/libs/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="../js/libs/semantic.min.js"></script>
</head>
<body>
	<div class="is-menu"><i class="th icon primary"></i></div>
    <div class="ui top fixed inverted menu" id="menu">
        <div class="ui container fluid">
        	<div class="item brand">
        		<i class="large arrow circle down icon"></i>
        	</div>
            <a class="item">One</a>
            <a class="active item">Two</a>
            <a class="item">Three</a>
            <a class="item">Four</a>

            <div class="right menu">
                <a href="" class="item">Log In</a>
                <a href="" class="item">Register</a>
            </div>
        </div>
    </div>

	<div class="ui main container mt-80">
	    <div class="ui segment basic">
	    	<h1 class="ui header">Responsible Navbar
	    		<div class="sub header">基于SemanticUI实现总结</div>
	    		<div class="fs-12">2018-09-30</div>
	    	</h1>
	    </div>
	    <div class="ui segment">
	    	<h2 class="ui header dividing">基本概念</h2>
	    	<p>响应式导航栏实现的基本思路是：将768px作为宽度的分界点，小于它时，在右上角显示一个菜单图标，点击后打开竖向排列的菜单(用 <span class="ui label">$('#menu').transition('slide down')</span> 来实现)；大于它时，按正常套路实现一个通栏导航栏，左边依次是品牌logo和菜单项，右边是另一组菜单项。</p>

	    	<h2 class="ui header">一般通栏导航栏的实现</h2>
	    	<p>通常的需求是：1、有一个横向贯通的bar，背景色与其它部分要能明显区分开；2、最左侧是品牌logo；3、挨着品牌logo横向排列一些菜单项(一般是网站的频道)，被选中的要能突出显示；4、右侧是一些账号相关的菜单项。</p>
	    	<p>用semanticUI来实现这些需求很容易。对于一个横向贯通的bar，只需要用一个div来包裹：</p>
	    	<div class="ui segment inverted">
	    		<pre><code>&lt;div class="ui top fixed inverted menu" id="menu" &gt;
    ...menu项目...
&lt;/div&gt;</code></pre>
	    	</div>

	    	<h2 class="ui header">菜单项的实现</h2>
	    	<p>左侧的频道类菜单项，直接用<span class="ui label">div.menu&gt;div.item</span>的结构即可实现；而右侧菜单则要用<span class="ui label">div.right.menu&gt;div.item</span>。另外，品牌logo项要加 .brand，被选中项目应该添加 .active</p>
	    	<p>本案例中的html代码是：</p>
	    	<div class="ui segment inverted">
	    		<pre><code>&lt;div class="ui top fixed inverted menu" id="menu"&gt;
	&lt;div class="item <span style="color:orange;">brand</span>"&gt;
		&lt;i class="large arrow circle down icon"&gt;&lt;/i&gt;
	&lt;/div&gt;
    &lt;a class="item"&gt;One&lt;/a&gt;
    &lt;a class="<span style="color:orange;">active</span> item"&gt;Two&lt;/a&gt;
    &lt;a class="item"&gt;Three&lt;/a&gt;
    &lt;a class="item"&gt;Four&lt;/a&gt;

    &lt;div class="right menu"&gt;
        &lt;a href="" class="item"&gt;Log In&lt;/a&gt;
        &lt;a href="" class="item"&gt;Register&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
	    	</div>

	    	<h2 class="ui header">移动端菜单实现（汉堡按钮触发打开菜单）</h2>
	    	<p>初始状态下移动端右上角有一个菜单按钮，点击后才会显示所有的菜单。菜单按钮通过<span class="ui label">&lt;div class="is-menu&gt;&lt;i class="th icon primary"&gt;&lt;/span&gt;&lt;/div&gt;</span>；而点击后触发的菜单则不需要另外编写，直接利用编写好的通栏菜单即可，只是需要点击后调用 <span class="ui label">$('#menu').transition('slide down')</span>方法即可—— 这是使用了 semanticUI 中统一封装的 transition 方法。 </p>
	    	<div class="ui message green">
	    		UI Transitions provide a wrapper for using CSS transitions in Javascript providing cross-browser callbacks, advanced queuing, and feature detection.

Transitions are loosely coupled with other ui modules like dropdowns and modals to provide element transitions
	    	</div>
	    	<div>之所以.is-menu包裹的节点在移动屏幕上才可见，原因是.is-menu的定义就是指定了屏幕宽度的。</div>
	    	<p>有关的代码如下：</p>
	    	<div class="ui segment inverted blue">
	    		<pre><code>@media only screen and (max-width: @tabletBreakpoint) {
	.is-menu {
		display: block;
		z-index: 999;
		position: absolute;
	    	top: 1rem;
	    	right: 10px;
	    	color: @primaryColor!important;
	    	font-size: 2em;
	}

	.ui.menu {
		visibility: hidden;
	}
	.ui.menu,
	.ui.menu .right.menu {
		width: 100%!important;
		flex-direction: column!important;
	}

	.ui.menu .item {
		border-bottom: 1px solid @borderColor;
	}

	.ui.menu .item:last-child {
		border-bottom: 0;			
	}

}</code></pre>
	    	</div>
	    	<p>到现在，jQuery代码的处理并没有完成。因为当菜单被触发打开时，汉堡按钮应该变成另外的样子，表示点击可以收起菜单。因此，完整的jQuery代码应该这样：</p>
	    	<div class="ui segment inverted">
	    		<pre><code>$('.is-menu').click(function(){
        $('i',this).toggleClass('arrow circle up');
        $('#menu').transition('slide down')
    })</code></pre>
	    	</div>
	    	<p>这里要注意<span class="ui label">$('i',this).toggleClass('arrow circle up');</span> 中的$('i',this)，表示在以 this 为父节点的范围内查找 i；另外<span class="ui label">$('#menu').transition('slide down')</span> 也是一种 toggle 式的开关，当菜单处于打开状态时，它就关上菜单。</p>
	    </div>
		
	</div>
</body>
<script>
$(function(){
    $('.is-menu').click(function(){
        $('i',this).toggleClass('arrow circle up');
        $('#menu').transition('slide down')
    })
})
</script>
</html>